<template>
    <view @touchmove.stop.prevent = "doNothing">
        <u-overlay
            :show="showCartBox"
            :duration="0"
            :z-index="998"
            :opacity="0.3"
            @click="closeCart"
            @touchmove.stop
        ></u-overlay>
        <u-popup :show="showCartBox" mode="bottom" :z-index="999" :overlay="false">
            <view
                class="cart-box"
                :style="{
                    marginBottom: cartHeight + 'rpx',
                }"
            >
                <view class="title">
                    <view class="left"> 购物车 </view>
                    <view class="right" @click="showClear = true">
                        <u-icon
                            name="trash"
                            label="清空"
                            color="#adadad"
                            labelColor="#adadad"
                        ></u-icon>
                    </view>
                </view>
                <scroll-view :scroll-y="true" style="max-height: 800rpx">
                    <food-good-list
                        :list="cartList"
                        :showCls="false"
                        :canSelect="false"
                        :isCart="true"
                    ></food-good-list>
                </scroll-view>
            </view>
        </u-popup>
        <u-modal :show="showClear" :closeOnClickOverlay="true" @close="showClear = false">
            <view slot="default"> 清空购物车 </view>
            <view
                slot="confirmButton"
                style="display: flex; align-items: center; justify-content: space-around"
            >
                <view style="width: 40%; float: left">
                    <u-button text="取消" shape="circle" @click="showClear = false"> </u-button>
                </view>
                <view style="width: 40%; float: left">
                    <u-button
                        text="清空"
                        type="primary"
                        shape="circle"
                        @click="clearCart"
                    ></u-button>
                </view>
            </view>
        </u-modal>
        <view class="cart" :style="{ backgroundColor: order_info.qty > 0 ? 'black' : '#666' }">
            <view
                @click="order_info.qty > 0 ? (showCartBox = !showCartBox) : false"
                class="cartIcon"
                :style="{
                    backgroundImage:
                        'url(https://vivipos.oss-cn-shanghai.aliyuncs.com/miniprogram/' +
                        (order_info.qty > 0 ? 'cart_full' : 'cart') +
                        '.png)',
                }"
            >
                <view class="badge" v-if="order_info.qty > 0">
                    {{ order_info.qty > 99 ? "99+" : order_info.qty }}
                </view>
            </view>
            <view @click="order_info.qty > 0 ? (showCartBox = !showCartBox) : false" class="detail">
                <view class="price" v-if="order_info.qty == 0">购物车是空的</view>
                <view class="price" v-else> ￥{{ order_info.total?order_info.total:0 | numFilter }} </view>
            </view>
            <view class="btn" v-if="order_info.qty != 0" @click="ordering">
                <block v-if="have_must">
                    <view class="box align-items-end">选好了</view>
                    <view class="box align-items-start">(未点必选品)</view>
                </block>
                <block v-else>
                    <view class="box align-items-center">选好了</view>
                </block>
            </view>
        </view>
    </view>
</template>
<script>
import { mapState } from "vuex"; //引入mapState
import pageApi from "@/api/page"
export default {
    data() {
        return {
            showCartBox: false,
            showClear: false,
            // have_must: false,
            selectPeople: true,
            haveMustProductNoArr: []
        };
    },
    computed: {
        ...mapState({
            scrollH: (state) => state.scrollH,
            cartHeight: (state) => state.cartHeight,
            cartGoods: (state) => state.ordering.cartGoods,
            totalPrice: (state) => state.ordering.totalPrice,
            cart_info: (state) => state.cart.cart_info, // 购物车详情
            order_info: (state) => state.cart.order_info, // 订单详情
          category: (state) => state.page.category
        }),
      cartList () {
          return [{
            button_color: "department-button-color-9",
            category_full_name: "A",
            category_name: "A",
            category_no: "A",
            font_size: "xlarge",
            product: this.cart_info,
            sort: 1
          }]
      },
      have_must() {
          let status = false
        if(this.cart_info.length<=0 || this.haveMustProductNoArr.length<=0) return false
        const selectMustProductNoArr = []
        _.map(this.cart_info,cartItem=>{
          if(_.includes(this.haveMustProductNoArr,cartItem.product_no)){
            selectMustProductNoArr.push(cartItem.product_no)
          }
        })
        if(_.join(selectMustProductNoArr.sort()) !== _.join(this.haveMustProductNoArr.sort())){
          status = true
        }
        return status
      }
    },
  created() {
  },
  mounted() {
        this.$nextTick(() => {
            if (this.$store.state.cartHeight == 0) {
                uni.createSelectorQuery()
                    .in(this)
                    .select(".cart")
                    .boundingClientRect((data) => {
                        this.$store.commit("set", {
                            cartHeight: parseInt(data.height * this.$store.state.winrate),
                        });
                    })
                    .exec();
            }
        });
        uni.$on("changeCart", (open = false) => {
            if (open) {
                this.showCartBox = open;
            } else {
                if (this.order_info.qty == 0) {
                    this.showCartBox = false;
                }
            }
        });
    },
    methods: {
      setMustProduct() {
        this.haveMustProductNoArr = []
        const category = _.filter(this.category,item=>{
          return item.category_no == "1115"
        })
        if(!category || category.length<=0) {
          return
        }
        const product = category[0].product
        // 循环必选产品
        _.each(product,item=>{
          if(item.is_c_must){
            this.haveMustProductNoArr.push(item.product_no)
          }
        })
        console.log("-=-=-=-==-==-=-=haveMustProductNoArr=====",this.haveMustProductNoArr)
      },
      // 下单
        ordering() {
          if(this.have_must){
            uni.showToast({
              title: "请先选择必选品",
              duration: 2000,
              icon: "none"
            })
            this.$emit("scrollToMustCate",{})
            return false
          }
          uni.navigateTo({ url: "/pages/ordering/ordering" });
        },
        closeCart() {
            this.showCartBox = false;
        },
      // 清空购物车
        clearCart() {
          // 进行入购物车
          pageApi.clearCart().then(res=>{
            if(res.code == 200){
              this.$store.commit('cart/setCartInfo',res.data.cart_info)
              this.$store.commit('cart/setOrderInfo',res.data.order_info)
              uni.$emit("changeCart");
            }
          })
            this.showClear = false;
            this.showCartBox = false;
        },
    },
    filters: {
        numFilter(value) {
            // 截取当前数据到小数点后两位
            let realVal = parseFloat(value).toFixed(2);
            return realVal;
        },
    },

  watch: {
    category: {
      handler (newVal,oldVal) {
        this.setMustProduct()
      },
      deep:true,
      immediate: true
    }
  }
};
</script>
<style lang="scss">
.cart-box {
    .title {
        padding: 30rpx;
        display: flex;
        justify-content: space-between;
        background-color: #f2f2f2;
        color: #484848;
        .left {
            &:before {
                content: "";
                margin-right: 6rpx;
                padding-right: 6rpx;
                border-left: 8rpx solid #666;
                height: 100%;
                display: inline-block;
                vertical-align: middle;
            }
        }
    }
}

.cart {
    position: fixed;
    bottom: 0;
    height: 110rpx;
    width: 100%;
    z-index: 1000;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .cartIcon {
        float: left;
        width: 15%;
        height: 100%;
        background-size: 50rpx 50rpx;
        background-position: center center;
        background-repeat: no-repeat;
        .badge {
            min-width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
            float: right;
            margin: 6% 8% 0 0;
            padding: 10rpx !important;
            background-color: #f9ae3d;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 80%;
            color: #ffffff;
        }
    }
    .detail {
        float: left;
        width: 55%;
        height: 100%;
        display: flex;
        align-items: center;
        .price {
            font-weight: 400;
            font-size: 36rpx;
            color: #fff;
        }
    }
    .btn {
        float: left;
        width: 30%;
        height: 100%;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-weight: 400;
        font-size: 30rpx;
        .box {
            height: 100%;
            width: 100%;
            background-color: #f9ae3d;
            display: flex;
            justify-content: center;
        }
    }
}

.align-items-start {
    align-items: flex-start;
}

.align-items-end {
    align-items: flex-end;
}

.align-items-center {
    align-items: center;
}
</style>
